<!DOCTYPE html />
<html>
<head>
    <!-- Loaded files-->
    <style type="text/css">
        @import "styles/userpage.css";
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js">
    </script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css"
        rel="Stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("#dropMenu").accordion();
        });
         $(function () {
             $("#addPhoto")
							.click(function () {
							    $("#addPhotoDialog").dialog();
							});
         });
         $(function () {
             $("#addSubCategory")
							.click(function () {
							    $("#addSubCategoryDialog").dialog();
							});
			});
            $(function () {
                $("#tabbedContent").tabs();
            });
                    </script>
    <!--Code will change the title-->
    <title>Ivan Petrov's Account</title>
</head>
<body>
    <header class="topmenu">
        <div class="Enheim">
            <span id="Enheim">Enheim</span> <span id="gallery">gallery</span>
        </div>
        <a href="">Home</a> <a href="" id="signOutButton">Sign out</a>
    </header>
    
    <div id="arena">
        <nav id="dropMenu">
            <h4>
                <a href="#">Randoms</a></h4>
            <div id="randoms">
                <p>
                    <ul>
                        <li><a class="" href="">Random Photo</a> </li>
                        <li><a class="" href="">Random Gallery</a> </li>
                    </ul>
                </p>
            </div>
            <h4>
                <a href="#">Statistics</a></h4>
            <div id="statistics">
                <p>
                    <ul>
                        <li><a class="" href="">User Activity</a> </li>
                        <li><a class="" href="">Image Uploads</a> </li>
                    </ul>
                </p>
            </div>
            <h4>
                <a href="#">Find User</a></h4>
        </nav>
        
        <section id="contentDiv">
            <div id="tabbedContent">
                <ul>
                    <li><a href="#personal">Personal Galleries</a></li>
                    <li><a href="#profile">Profile</a></li>
                </ul>
                <div id="personal">
                    <div class="categoryPresentation">
                        <table>
                            <tr class="elementsRow">
                                <!--Three elements per Row-->
                                <!--
                           --Pattern Photo
                               <td class="thumbnailElement">
                               <img src="" width="200px" height="130px"/>
                               <br />
                               <a href="">Image Name</a>
                               </td>
                           --Pattern Category
                       -->
                                <td class="thumbnailElement">
                                    <img src="images/IvanPetrov/Landscapes/Sea Landscape.JPG" width="200px" height="130px" />
                                    <br />
                                    <a href="">Sea Landscape</a>
                                </td>
                                <td class="thumbnailElement">
                                    <img src="images/IvanPetrov/Landscapes/Silistar.jpg" width="200px" height="130px" />
                                    <br />
                                    <a href="">Silistar</a>
                                </td>
                                <td class="thumbnailElement">
                                    <img src="images/IvanPetrov/Landscapes/Shipka.JPG" width="200px" height="130px" />
                                    <br />
                                    <a href="">Shpka</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="categoryElement">
                                    <img src="images/folderBack.png" width="150px" height="100px" />
                                    <br />
                                    <a href="">London Landscapes</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                   
                    <div id="addItem">
                        <button id="addPhoto">
                            Add Photo</button>
                        <br />
                        <button id="addSubCategory">
                            Add Subcategory</button>
                    </div>
                    <div id="addItemDialogs" style="visibility: hidden;">
                        <div id="addPhotoDialog" title="Photo upload">
                            <label for="name">
                                Photo Name</label>
                                <br />
                            <input type="text">
                            <br />
                            <label for="description">
                                Description</label>
                            <br />
                            <input type="text">
                            <br />
                            <input type="file">
                            <br />
                            <button>
                                Upload</button>
                            <button>
                                Cancel</button>
                        </div>
                        <div id="addSubCategoryDialog" title="Subategory creation">
                            Enter subcategory name
                            <input type="text">
                            <button>
                                Create</button>
                            <button>
                                Cancel</button>
                        </div>
                    </div>
                </div>
                <div id="profile">
                    <form method="get">
                    <div id="profileData">
                        Username:
                        <label>
                        </label>
                        <br />
                        First Name:
                        <input type="text" /><br />
                        Surname:
                        <input type="text" /><br />
                        Password:
                        <input type="password" /><br />
                        Password repeat:<input type="password" /><br />
                        Email:<input type="email" /><br />
                        <button type="submit" id="saveChanges">
                            Save changes</button>
                    </div>
                    <button id="eraseAccount">
                        Erase account</button>
                    </form>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
